<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单发货单</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="//cdn.jsdelivr.net/jsbarcode/3.3.20/JsBarcode.all.min.js"></script>
    <script type="text/javascript">
        function myprint() {
            var img = 'data:image/jpeg;base64,' + '[[${img}]]';
            //直接调用浏览器打印功能
            bdhtml = window.document.body.innerHTML;
            window.document.body.innerHTML = '<img src="' + img + '">';
            //开始打印
            window.print();
            //还原网页内容
            window.document.body.innerHTML = bdhtml;
        }
    </script>
</head>
<body>
<style type="text/css">
    .record-box {
        position: relative;
        width: 900px;
        height: 550px;
        padding: 0 5px;
        font-size: 13px;
        color: #787878;
    }

    .record-head {
        margin: -20px 0 80px 0;
        height: 40px;
        line-height: 40px;
        font-size: 13px;
    }

    .record-head span {
        float: left;
    }

    .record-head i {
        float: right;
        font: normal 28px/30px Tahoma;
        cursor: pointer;
    }

    .record-code {
        position: absolute;
        left: 50%;
        top: 10px;
        margin-left: -110px;
        width: 220px;
        font-size: 14px;
        text-align: center;
    }

    .record-code img {
        width: 100%;
        display: block;
    }

    .record-code span {
        line-height: 2;
    }

    .record-box h2 {
        font-weight: normal;
        font-size: 20px;
        margin-bottom: 20px;
    }

    .record-info {
        line-height: 34px;
        overflow: hidden;
        margin-bottom: 15px;
    }

    .record-info span {
        float: left;
        width: 33.3%;
        text-align: left;
    }

    .record-info span:nth-child(3n-1) {
        padding-left: 9%;
        width: 35.66%;
    }

    .record-info span:nth-child(3n) {
        width: 20%;
    }

    .record-info span:last-child {
        width: 100%;
    }

    .record-table {
        max-height: 600px;
        overflow-y: auto;
    }

    .record-table table {
        width: 100%;
    }

    .record-table th, .record-table td {
        padding: 10px 0;
        font-size: 13px;
        text-align: center;
        border: 1px solid #787878;
    }

    .record-table th {
        padding: 5px 0;
    }

    .record-button {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 10px;
        text-align: center;
    }

    .record-button a {
        border: 1px solid #787878;
        padding: 10px 15px;
        font-size: 14px;
        color: #787878;
    }
</style>
<div class="record-box">
    <div class="record-table">
        <!--startprint--><img alt="快递图片" style="margin:0 auto;height:600px" th:src="${'data:image/jpeg;base64,'+img}"/>
        <!--endprint-->
    </div>
    <div style="color: red;font-size: 26px;padding-left: 100px;margin-left: 100px;">
        [[${error}]]
    </div>
    <div class="record-button"><a href="javascript:;" onclick="myprint()">打印</a></div>
</div>
</body>
</html>